<script setup></script>

<template>
  <div class="selectTraveler">
    <div class="top">
      <TicketPageTop :title="'Select Traveler'">
        <div class="btn">Finished'g</div>
      </TicketPageTop>
    </div>

    <div class="travelerList">
      <div class="item" v-for="(item, i) in 5" :key="i">
        <div :class="['checkBox', i == 2 ? 'con' : '']">
          <img src="/images/Shop/contract.png" alt="" />
        </div>
        <div class="name">Anger</div>
        <div class="id">4000***********000</div>
        <img src="/images/Shop/edit.png" alt="" class="edit" />
      </div>
    </div>

    <div class="btnBar">
      <div class="item" @click="$router.push('/addTravelers')">
        New passengers
      </div>
      <div class="item finish">Finish</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.selectTraveler {
  position: relative;

  > .top {
    > .TicketPageTop {
      justify-content: space-between;

      .btn {
        margin-right: 14rem;
        font-size: 14rem;
        font-weight: 400;
        line-height: 16rem;
        color: #999;
      }
    }
  }

  > .travelerList {
    padding-left: 8rem;
    padding-right: 5rem;
    margin-top: 20rem;

    > .item {
      display: flex;
      align-items: center;

      padding: 15rem 10rem 11rem 8rem;
      border-bottom: 1rem solid #e6e6e6;

      font-size: 14rem;
      font-weight: 400;
      line-height: 16rem;

      > .checkBox {
        width: 20rem;
        height: 20rem;
        margin-left: 8rem;
        margin-right: 20rem;

        border: 2rem solid #8030cf;
        border-radius: 4rem;

        display: flex;
        justify-content: center;
        align-items: center;

        > img {
          width: 85%;
          display: none;
        }

        &.con img {
          display: block;
        }
      }

      > .name {
        color: #000;
        margin-right: 48rem;
      }

      > .id {
        flex: 1;
        color: #666;
      }

      > .edit {
        width: 24rem;
        margin-right: 10rem;
      }
    }
  }

  > .btnBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20rem 20rem;

    display: flex;
    justify-content: center;

    > .item {
      flex: 1;
      text-align: center;

      font-size: 16rem;
      font-weight: 500;
      line-height: 22rem;
      color: rgba(100, 46, 142, 1);

      border: 1rem solid #642e8e;
      border-radius: 8rem;
      padding: 8rem 0;

      &.finish {
        background: #642e8e;
        color: #fff;
        margin-left: 40rem;
      }
    }
  }
}
</style>
